<template>
  <div>{{fullName}}</div>
  <button @click="changCompany">修改</button>
</template>

<script lang='ts' setup>
import {computed} from "vue"
import {IData} from "@/interfaces/registerInterface"

// function ref<T>(params:T):IMessage{
//   return {value:params}
// }

const company = ref<string>("蜗牛")
const school = ref<string>("学苑")

const obj = reactive<IData>({
  count:100,
  user:{id:1}
})

/**
 * 计算属性
 */
const fullName = computed(()=>{
  return company.value + school.value
})

/**
 * watch侦听
 */
watch(()=>{
  return company.value
},(newValue,oldValue)=>{
  console.log("newValue",newValue);
  console.log("oldValue",oldValue);
  //发送异步请求，执行复杂业务操作
},{
  deep:true,
  immediate:true
})

watchEffect(()=>{
  console.log("watchEffect")
  // console.log(company.value);
  console.log(school.value);
  
})

const changCompany = ()=>{
  company.value = "犀牛"
}

</script>

<style lang='scss' scoped>
</style>